<template>
	<uni-transition :mode-class="['slide-left']" :styles="tranStyles" :show="show">
		<view class="d-flex flex-column overflow-hidden" style="margin-top: 100px">
			<div v-if="!hasShop" style="margin: 10px auto">
				<image :src="imageUrl"></image>
				<text style="display: block;
    width: 61%;
    margin: auto;">您所在的城市没有店铺，敬请期待</text>
				<button style="margin-top: 2rpx;width: 60%;margin:10rpx auto;background-color: black;color: white" @tap="getShops">选择其它城市 </button>
			</div>
		</view>
	</uni-transition>
</template>

<script>
	import uniTransition from '@/components/uni-transition/uni-transition.vue'
	export default {
		name: 'Nocity',
		components: {
			uniTransition
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			categories: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
        imageUrl: '',
				tranStyles: {
					width: '100%',
					position: 'absolute',
					top: 0,
					left: 0,
					bottom: 0,
					backgroundColor: '#fff',
					zIndex: 998
				},
				hotSearch: [],
				historySearch: [],
				keyword: '',
				result: []
			}
		},
		async created() {
      let flag =  this.$api.customStoreageManage.getStorage("currentBrand")
      this.imageUrl = flag.inBuildUrl

      this.hotSearch = uni.getStorageSync('salesTop')//销售最高的
      if(uni.getStorageSync("history-search")){
        console.log("没有来么？")
        this.historySearch = uni.getStorageSync("history-search")
      }else{
        this.historySearch = []
      }

		},
		methods: {
      // 获取位置信息

			async getShops(){
       let loca =  await this.$api.getWxLocation()
        console.log("aaa",loca.longitude)
        this.$api.ajax({
          url: "/web/app-zzjg/zzjg-list",
          data: {
            lat: loca.latitude,
            lng: loca.longitude,
            sheng: "河南省",
            shi: "郑州市",
            brandId: this.$api.brandId
          },
          method: "get",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success:(res)=> {
            // console.log(res);
            const { data } = res
            console.log("dddd",data)
            this.currentcityShops = data.data
            uni.setStorageSync("currentcityShops",this.currentcityShops)
            this.$api.customStoreageManage.setStorage("currentcityShopsP", this.currentcityShops,1)
            uni.hideLoading()
            this.$nextTick(()=>{
              uni.navigateTo({
                url: "/pages/location/index"
                // url: "/pages/location/index?cityShops="+encodeURIComponent(JSON.stringify(this.currentcityShops))
              })
            })

          }
        });




			},
			clear() {
				this.keyword=''
				this.result = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		height: 100rpx;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.6);

		.search-input {
			flex: 1;
			height: 60rpx;
			padding: 10rpx 20rpx;
			background-color: #f7f7f7;
			font-size: $font-size-base;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;

			.search-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			input {
				flex: 1;
			}

			.close-icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.section {
		padding: 30rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title {
				font-size: $font-size-medium;
				color: $text-color-base;
			}

			.subtitle {
				display: flex;
				align-items: center;
				font-size: $font-size-sm;
				color: $text-color-assist;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.item {
				background-color: #f5f5f7;
				padding: 10rpx 20rpx;
				font-size: $font-size-sm;
				color: $text-color-grey;
				border-radius: 50rem !important;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.name-image {
					width: 30rpx;
					height: 30rpx;
          margin-left: 10rpx;
          border-radius: 10rpx;
				}
			}
		}
	}

	.result {
		height: calc(100vh - 120rpx);
		/* #ifdef H5 */
		height: calc(100vh - 120rpx - 100rpx);
		/* #endif */
		overflow: hidden;

		.product {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $font-size-base;

			.pro-image {
				width: 108rpx;
				height: 108rpx;
        border-radius: 15rpx;
        margin-left: 25rpx;
			}
			.pro-name{
        margin-left: 20rpx;
      }
			.pro-price {
				font-weight: 500 !important;
			}
		}
	}
</style>
